<template>
  <div>
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange" class="detail-list">
      <a-space slot="title">
        <a-button type="primary" @click="$refs.form.create(channel)">添加IP</a-button>
        <a-button @click="onRefreshCache">刷新缓存</a-button>
      </a-space>

      <div slot="action" class="table-action" slot-scope="t,r,i">
        <a-popconfirm :title="`确定删除【${r.ipAddress}】吗？`" @confirm="onDelete(r.id,i)">
          <a class="delete">删除</a>
        </a-popconfirm>
      </div>
      <template slot="status" slot-scope="t,r">
        <a-switch :defaultChecked="Boolean(t)" checkedChildren="启用" unCheckedChildren="停用" @change="onChange(r.id,$event,'state')" />
      </template>
    </a-table>
    <sjht-ipwhite-form ref="form" @success="onSuccess" />
  </div>
</template>
<script>
import SjhtIpwhiteForm from './modules/form'
import { table, tableAction } from '@/utils/mixins'
import { PageIpwhitelist, DeleteIpwhitelist, UpdateIpwhitelist, RefreshCache } from '@/api/manage/ipwhitelist'
export default {
  name: 'SjhtIpwhiteList', //IP白名单配置列表
  mixins: [table, tableAction],
  props: {
    channel: Object //渠道实体
  },
  components: {
    [SjhtIpwhiteForm.name]: SjhtIpwhiteForm
  },
  data() {
    return {
      loadApi: PageIpwhitelist, //分页列表接口
      deleteApi: DeleteIpwhitelist, //删除接口
      updateApi: UpdateIpwhitelist, //修改接口
      pagination: { total: 0, simple: true, hideOnSinglePage: true } //显示简单分页
    }
  },
  created() {
    const {
      channel: { appid }
    } = this
    this.loadParams = { appid }

    this.columns.unshift({ title: '操作', key: 'operation', width: 50, align: 'center', scopedSlots: { customRender: 'action' } })
    this.columns.push(
      { title: 'IP地址', dataIndex: 'ipAddress', width: 120 },
      { title: '状态', dataIndex: 'state', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
      { title: '创建时间', dataIndex: 'createTime', width: 145 },
      { title: '备注', dataIndex: 'notes' }
    )
  },
  mounted() {
    this.loadData()
  },
  methods: {
    //刷新缓存
    onRefreshCache() {
      this.loading = true
      RefreshCache(this.channel.appid)
        .then(() => {
          this.$message.success('刷新成功')
        })
        .catch(err => {
          this.$message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.detail-list /deep/ .ant-table-title {
  padding: 0 0 8px 0;
}
</style>